<script setup lang="ts">
import {onBeforeMount, reactive, ref} from 'vue'
import http from '../lib/request'
import {ElMessage} from "element-plus";

const input = ref('李四')
onBeforeMount(() => init)
let tableData = reactive([])

const init = async () => {
    tableData.splice(0, tableData.length)
    tableData.push(...await http.get('/employee/list'))
}
init()


const handleQuery = () => {

}

const edit = (row) => {
    console.log(row)
    ElMessage.success(row.name)
}

const del = async (id) => {
    let {code, msg, data} = await http.delete('employee/delete', {params: {id}})
    if (code === 0) {
        ElMessage.error(msg)
    } else if (code === 1) {
        ElMessage.success(id + data)
        init()
    }
}

const empStatusChange = async (row) => {
    let {data} = await http.put(`employee/updatestatus?id=${row.id}&status=${row.status}`)
    ElMessage.success(data)
}
</script>

<template>

    <el-table :data="tableData" stripe border size="small">
        <el-table-column prop="name" label="员工姓名"></el-table-column>
        <el-table-column prop="username" label="账号"></el-table-column>
        <el-table-column prop="phone" label="手机号"></el-table-column>

        <!-- el-switch 显示状态， -->
        <el-table-column label="状态">
            <template #default="{row}">
                <el-switch
                        size="small"
                        inline-prompt
                        v-model="row.status"
                        :active-value="1"
                        active-text="启用"
                        :inactive-value="0"
                        inactive-text="禁用"
                        @change="empStatusChange(row)"
                />
            </template>
        </el-table-column>
        <el-table-column label="创建时间">
            <template #default="{row}">
                <span>{{ row.createTime }}</span>
            </template>
        </el-table-column>
        <el-table-column label="操作">
            <template v-slot="{row}">
                <el-button type="success" size="small" @click="edit(row)">编辑</el-button>
                <el-button type="danger" size="small" @click="del(row.id)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>

</template>

<style scoped>

</style>
